<template>
  <div id="aTabs">
    <a-tabs default-active-key="yearPlan" @change="callback" :animated="false">
      <template v-for="item in tabList">
        <a-tab-pane :key="item.key" :tab="item.title" :disabled="item.disabled">
          <div class="pane_box">
            <component :planId="planId" v-if="item.importSrc" :is="item.importSrc"></component>
          </div>
        </a-tab-pane>
      </template>
    </a-tabs>
  </div>
</template>
<script>
export default {
  props: {
    tabList: {
      type: Array,
      default: () => [
        // {
        // * key 标识
        // * title 名称
        //   importSrc 组件 基础格式 ()=>import(相对路径)
        //   disabled 是否不可选择
        // }
      ],
    },
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    callback(key) {
      // 切换列表时返回，当前key
      this.$emit('change', key)
    },
  },
}
</script>

<style>
/* #aTabs .ant-tabs-nav-wrap {
  background-color: #fff;
}
#aTabs .ant-tabs-nav .ant-tabs-tab-active {
  font-weight: normal;
  color: #1890ff;
  background-color: #c9e3fe;
}
#aTabs .ant-tabs-ink-bar {
  background-color: #1890ff;
} */
/* .pane_box{
  margin-top: -16px;
  border: 1px solid #dcedfe;
} */
</style>